<template>
  <div class="article-preview">
    <el-dialog  title="预览文章"   :visible.sync="dialogFormVisible" width="60%">
      <div class="title">
        <h2>{{article.title}}</h2>
        <div>
          <span>{{article.createTime | parseTimeByString}}</span>
          <span>{{article.username}}</span>
          <span class="el-icon-view"></span>
          <span>{{article.visits}}</span>
        </div>
      </div>
      <div class="content" v-html="article.articleBody">
      </div>

      <div slot="footer" class="dialog-footer">
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import { add, detail } from '@/api/hmmm/articles.js'
export default {
  name: 'ArticlesPreview',
  props: {
    article: {
      type: Object,
      required: true,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      title: '',
      articleBody: '',
      createTime: '',
      // channelId: '',
      videoURL: '',
      dialogFormVisible: false
    }
  },
  computed: {},
  methods: {
    // 弹层显示
    dialogFormShow () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormHidden () {
      this.dialogFormVisible = false
    },
    createData (isDraft) {
    }
  }
}
</script>
<style scoped lang='less'>

.title{
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  h2 {
    padding: 0;
    margin: 0;
  }
  span{
    margin-left: 10px;
    margin-top: 10px;
  }
}
.content{
  background: #f5f5f5;
  padding: 10px;
  /deep/ img {
    width: 100%;
  }
}

 /deep/ .ql-container {
  max-width: 1000px;
  height: 250px;
  .ql-editor {
    max-width: 1000px;
  }
    }
.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-form-item--medium {
  margin-bottom: 22px;
}
.el-dialog__footer {
  text-align: center;
}
.publish-container /deep/ .ql-editor{
  height: 500px;
}
.publish-container /deep/ .ql-toolbar.ql-snow{
  padding: 0 8px;
}
</style>
